<template>
	<div class="profile">
		<div class="header border-bottom">我的</div>
		<div class="overview" @click="jumpToLogin">
			<span class="man iconfont icon-geren2"></span>
			<div class="info">
				<div class="login">登陆/注册</div>
				<div class="phone">
					<span class="shouji iconfont icon-shouji"></span>
					暂无绑定手机号
				</div>
			</div>
			<span class="arrow iconfont icon-jiantouyou"></span>
		</div>
		<div class="center border-bottom">
			<div class="left border-right">
				<span class="num">0.00</span>
				<span class="dw">元</span>
				<div class="desc">我的余额</div>
			</div>
			<div class="left border-right">
				<span class="num">0</span>
				<span class="dw">个</span>
				<div class="desc">我的优惠</div>
			</div>
			<div class="left border-right">
				<span class="num">0</span>
				<span class="dw">分</span>
				<div class="desc">我的积分</div>
			</div>
		</div>
		<div class="massage">
			<div class="first">
				<span class="icon iconfont icon-dingdan"></span>
				我的订单
				<span class="arrow iconfont icon-jiantouyou"></span>
			</div>
		</div>
		<div class="massage">
			<div class="first">
				<span class="icon iconfont icon-jifen"></span>
				积分商城
				<span class="arrow iconfont icon-jiantouyou"></span>
			</div>
		</div>
		<div class="massage">
			<div class="first">
				<span class="icon iconfont icon-huiyuan"></span>
				专属会员卡
				<span class="arrow iconfont icon-jiantouyou"></span>
			</div>
		</div>
		<div class="massage">
			<div class="first">
				<span class="icon iconfont icon-fuwuzhongxin"></span>
				服务中心
				<span class="arrow iconfont icon-jiantouyou"></span>
			</div>
		</div>
	</div> 	
</template>

<script>
	export default{
		methods:{
			jumpToLogin() {
				this.$router.push('/login')
			}
		}
	}
</script>

<style lang="stylus" scoped>
@import '~common/stylus/mixin.styl'
	.header
		width 100%
		height 40px
		background-color $yellow
		text-align center
		color $text
		font-size 16px
		line-height 40px
		border-bottom(#000)
	.overview
		margin-top 1px
		padding 10px 8px
		background-color $yellow
		position relative
		.man
			display inline-block
			font-size 50px
			color #fff
		.info
			display inline-block
			margin-left 10px
			color $text
			.login,.phone
				font-size 14px
				line-height 24px
			.phone 
				font-size 12px
				.shouji
					font-size 14px
		.arrow
			position absolute
			right 10px
			top 25px
			color #fff
			font-size 10px
			padding 5px
	.center
		margin 5px
		display flex	
		.left
			flex 1 
			margin 10px
			text-align center
			display inline-block
			border-right(#ccc)
			&:last-child
				border-none()
			.num
				color #f500399e
				font-size 20px
				line-height 32px
				font-wight 900
	.massage
		font-size 12px
		line-height 30px
		color $darktext
		position relative
		border-bottom(#ccc)
		.icon
			font-size 12px
			margin 0 6px
		.arrow
			font-size 12px
			position absolute
			top 5px
			right 10px	
</style>